<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游-跟团游详情</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
    <link rel="stylesheet" href="/static/index/css/baseDetail.css">
    <link rel="stylesheet" href="/static/index/css/gentuanyouDetail.css">
    <link type="text/css" rel="stylesheet" href="/static/index/vendor/css/calendar-pro.css">
</head>
<body>

{include file="public/header" model='group' /}
<script src="/static/js/jquery-3.2.1.min.js"></script>

<div class="searchBox layui-hide-xs">
    <div class="layui-container mbx-top-nav">
        <div class="mianbaoxie-nav">
            <span class="layui-breadcrumb">
              <a href="/">首页</a>
              <a href="{:url('group/groupList')}">跟团游列表</a>
              <a><cite>{$group.gtour_title}</cite></a>
            </span>
        </div>

        <div class="weather">
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=5&py=linyi2" width="200" height="30" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" ></iframe>
        </div>
    </div>
</div>

<div class="tour-detail">
    <div class="layui-container">
        <div class="tour-detail-box tour-detail-top">
            <div class="layui-row">
                <div class="layui-col-md10 layui-col-xs12">
                    <div class="tour-title">
                        <h1>{$group.gtour_title}</h1>
                        {eq name="is_select" value="0"}
                        <span id="toCollect" style="cursor: pointer;"><i class="layui-icon layui-icon-rate" style="font-size: 16px; color: #F2BF56;"></i>收藏</span>
                        {else/}
                        <span>已收藏</span>
                        {/eq}
                    </div>
                    <div class="tour-tags">

                        {foreach $group.gtour_label as $k => $v}
                        <span>{$v}</span>
                        {/foreach}

                    </div>
                </div>
                <div class="layui-col-md2 layui-col-xs12">
                    <div class="tour_tobuy_md  layui-hide-xs">
                        <div class="buy-button">
                            <a href="#toBuy">立即预定</a>
                        </div>
                        <p>已售{$group.sale_sum}</p>
                    </div>

                    <div class="tour_tobuy_xs  layui-hide-md">

                        <a href="#toBuy">立即预定</a>
                        <span>已售{$group.sale_sum}</span>

                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space30">
                <div class="layui-col-md7 layui-col-xs12">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md8  layui-col-xs12">
                            <div class="tour_l_img">
                                {notempty name="groupImg[0]['img_path']"}
                                <img lay-src="{$groupImg[0]['img_path']}" alt="">
                                {/notempty}
                            </div>
                        </div>
                        <div class="layui-col-md4  layui-col-xs12">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md12  layui-col-xs6">
                                    <div class="tour_r_img">
                                        {notempty name="groupImg[1]['img_path']"}
                                        <img lay-src="{$groupImg[1]['img_path']}" alt="">
                                        {/notempty}
                                    </div>
                                </div>
                                <div class="layui-col-md12  layui-col-xs6">
                                    <div class="tour_r_img">
                                        {notempty name="groupImg[2]['img_path']"}
                                        <img lay-src="{$groupImg[2]['img_path']}" alt="">
                                        {/notempty}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md5  layui-col-xs12">

                    <div class="open-time">
                        <i class="layui-icon layui-icon-log" style="font-size: 18px; color: #20E6BA;"></i>&nbsp;
                        行程时间：<span id="open_time">{$group.lv_days}天{$group.lv_nghit}晚</span>
                    </div>
                    <div class="tour-address">
                        <div class="tour-address-l">
                            <i class="layui-icon layui-icon-location" style="font-size: 18px; color: #20E6BA;"></i>
                            出发地点：<span id="tour_address">{$group.start}</span>
                        </div>
                        <!-- <div class="tour-address-r">
                            <a href="javascript:;">[ 查看地图 ]</a>
                        </div> -->
                    </div>
                    <div class="tour-rate">
                        <div class="tour-rate-top">
                            <div class="tour-rate-top-icon">
                                <i class="layui-icon layui-icon-face-smile"
                                   style="font-size: 18px; color: #FFAD6D;"></i>
                                &nbsp;
                                好评率{$group.rate}%
                            </div>
                            <div class="tour-rate-top-a">
                                <a href="#comment">查看全部{$group.comment_count}条评论 ></a>
                            </div>
                        </div>

                        <div class="comment-content">
                            {empty name='group.latests_comment.content'}
                            暂无评论
                            {else/}
                            {$group.latests_comment.content}
                            {/empty}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-container ticket-box" id="toBuy">
        <div class="tour-detail-box tour-detail-midle">
            <div class="layui-row ticket-t">
                <div class="layui-col-md1">
                    <div class="target-s">跟团预定</div>
                </div>
            </div>

            <div class="time-select">

                <div class="layui-row layui-col-space30">

                    <div class="layui-col-md6">
                        <div class="demo-box selectDate"></div>
                    </div>
                    <div class="layui-col-md6">

                        <div style="height:20px;"></div>

                        <div class="go-info">

                            <div class="go-time-show">
                                <i class="layui-icon layui-icon-log" style="font-size: 18px; color: #20E6BA;"></i>
                                <p>出发日期：</p>
                                <span id="goTime">未选择</span>
                            </div>
                            <div class="go-people-num">
                                <i class="layui-icon layui-icon-user" style="font-size: 18px; color: #20E6BA;"></i>
                                <p>参团人数：</p>
                                <input name="js_num" class="alignment" data-step="1" data-min="1" data-max="100" data-digit="0" value="1"/>

                            </div>
                            <div class="lvxingshe-phone">
                                <i class="layui-icon layui-icon-cellphone" style="font-size: 20px; color: #20E6BA;"></i>
                                <p>{$team.team_phone}</p>
                                <span>对此团有疑问请拨打客服热线</span>
                            </div>

                            <div class="lvxingshe-name">
                                <i class="layui-icon layui-icon-template-1" style="font-size: 18px; color: #5C5C5C;"></i>
                                <p>{$team.team_name}</p>
                            </div>

                            <div class="to-buy">

                                <div class="layui-row">
                                    <div class="layui-col-md8">

                                        <div class="to-buy-money">
                                            <h1>总价：</h1>
                                            <span>￥<span id="thePrice"> {$group.gtour_price*1}</span></span>
                                            <a href="javascript:;">购买须知</a>
                                        </div>

                                    </div>

                                    <div class="layui-col-md3">

                                        <div class="to-buy-button">
                                            <a href="{:url('Tour/createOrder')}">立即预定</a>
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>


    <div class="layui-container ticket-info">
        <div class="tour-detail-box tour-detail-midle">

            <div class="layui-row ticket-t">
                <div class="layui-col-md1">
                    <div class="target-s">行程介绍</div>
                </div>

                <div class="layui-col-md1">
                    <a href="#comment"><div class="target-s target-s-no">用户评价</div></a>
                </div>
            </div>


            <div class="layui-row ticket-discript">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        行程介绍
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content">

                        <ul class="layui-timeline">

                            {foreach $journey as $k2 => $v2}
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">第{$v2.sort_day}天</h3>
                                    <p>景点：{$v2.tour}</p>
                                    <br>
                                    <p>餐饮：{$v2.catering}</p>
                                    <br>
                                    <p>住宿：{$v2.living}</p>
                                </div>
                            </li>
                            {/foreach}

                            <li class="layui-timeline-item"></li>
                        </ul>
                    </div>

                </div>

            </div>

            <div class="layui-row ticket-discript" id="comment">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        用户评价
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content" id="ticket-discript-content"></div>

                    <div id="comment-page"></div>

                </div>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript" src="/static/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/static/index/vendor/js/calendar-pro.js"></script>
<script type="text/javascript" src="/static/index/js/num-alignment.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['element', 'layer', 'form', 'carousel','laydate', 'flow', 'laypage'], function () {
        var $ = layui.jquery;
        var layer = layui.layer
            , element = layui.element
            , carousel = layui.carousel
            , laydate = layui.laydate
            , flow = layui.flow
            , laypage = layui.laypage
            , form = layui.form;

        flow.lazyimg();

        // 初始化
        alignmentFns.initialize();

        // 销毁
        alignmentFns.destroy();

        $('.alignment').change(function(){
            //获取购买数量
            var js_num = $('.alignment').val();

            var jiesuan_goods_price = $('#js_goods_price').val();

            if (jiesuan_goods_price){
                var all_money = js_num*1*jiesuan_goods_price*1;
                $('#js_order_money').val(all_money);
            }else{
                $('#js_order_money').val(0);
            }
        });

        var uid = "{$Think.session.uid}";
        var other_id = "{$group.id}";
        $('#toCollect').click(function(){

            if (!uid) {
                layer.msg('请先登录',{time:1000});
                return false;
            }

            $.ajax({
                    type: "post",
                    url: "{:url('Collect/addCollection')}",
                    dataType: 'json',
                    data: {user_id:uid,other_id:other_id,type:3},

                    success:function(res){
                        if (res.code == 200) {
                            console.log(res.code);
                            layer.msg(res.msg,{time:1000},function(){
                                $('#toCollect').html('已收藏');
                                $('#toCollect').css('cursor','');
                                $('#toCollect').attr('id','');
                                
                            });
                           

                        }else{
                            layer.msg(res.msg,{time:1000});
                        }

                    }
                });

        });

        //执行一个laypage实例
        laypage.render({
                elem: 'comment-page' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: {$group.comment_count} //数据总数，从服务端得到
            ,prev:'<i class="layui-icon layui-icon-left"></i>'
            ,next:'<i class="layui-icon layui-icon-right"></i>'
            ,limit:5
            ,jump: function(obj, first){
            $.ajax({
                    type: "post",
                    url: "{:url('group/getComment')}",
                    data: {page:obj.curr,id:{$group.id}},
                success:function(data){
                var system_str = '';
                $.each(data.data,function(k,v){

                    system_str += '<div class="ticket-comment-li">';
                    system_str += '<div class="ticket-comment-user">';
                    system_str += '<div class="ticket-comment-user-l">';
                    system_str += '<div class="comment-user-img">';
                    system_str += '<img src="'+ v.user_icon +'" alt="">';
                    system_str += '</div>';
                    system_str += '<div class="comment-user-name">';
                    system_str += v.nickname;
                    system_str += '</div>';
                    system_str += '<div class="comment-user-tag">';

                    if (v.eval_status == 1){
                        system_str += '<span>好评</span>';
                    } else {
                        system_str += '<span>差评</span>';
                    }

                    system_str += '</div>';
                    system_str += '</div>';
                    system_str += '<div class="ticket-comment-user-r">';
                    system_str += v.create_time;
                    system_str += '</div>';
                    system_str += '</div>';
                    system_str += '<div class="ticket-comment-content">';
                    system_str += v.content;
                    system_str += '</div>';

                    system_str += '<div class="ticket-comment-img">';
                    system_str += '<div class="layui-row layui-col-space20">';

                    for(i = 0;i < v.images.length;i++){

                        system_str += '<div class="layui-col-md4">';
                        system_str += '<div class="comment-img">';
                        system_str += '<img src="'+v.images[i]+'" alt="">';
                        system_str += '</div>';
                        system_str += '</div>';

                    }

                    system_str += '</div>';
                    system_str += '</div>';
                    system_str += '</div>';

                });

                $('#ticket-discript-content').html(system_str);

            }
        });
        }
    });

    });

    $('.selectDate-box').calendar({
        ele : '.selectDate', //依附
        title : '选择出行时间',
        endDate : '2020-01-01',
        data : {$gscheduleData}
    });


</script>
</body>
</html>